<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
        .box {
          width: 800px;
          height: 600px;
          position: relative;
        }
        .box img {
          width: 800px;
          height: 600px;
          object-fit: cover;
        }
        .box::after {
          content: "";
          position: absolute;
          /* 相当于 top right bottom left 的值都是 80px*/
          inset: 80px;
          background-color: rgba(255, 255, 255, 0.5);
          border-radius: 10px;
          /* 当前元素后面的图形添加模糊效果 */
          backdrop-filter: blur(10px);
          /* 亮度调整 - 降低到原始亮度的60% 
              backdrop-filter: brightness(60%);*/
          /* 对比度调整 - 提升对比度为原始的 200% 
              backdrop-filter: contrast(2);*/
        }
      </style>
      <div class="box">
        <img src="/src/img/grid/16.png" />
      </div>
</body>
</html>